<template>
  <h2>
    {{fullname}}
  </h2>
  <button @click="setFullname">设置fullname</button>
</template>

<script>
import {computed, reactive} from "vue";

export default {
  setup(){

    const names=reactive({
      firstName: "kobe",
      lastName: "bryant"
    })

    // const fullname=computed(()=>{ // 一般情况下只写getter不写setter。当只有getter的时候，computed里面写一个函数
    //   return names.firstName+" "+names.lastName
    // })

    const fullname=computed({
      get:()=>{
        return names.firstName+" "+names.lastName
      },
      set:newValue=>{
        const tempNames=newValue.split(" ")
        names.firstName=tempNames[0]
        names.lastName=tempNames[1]
      }
    })

    const setFullname=()=>{
      // fullname="ding+ jie" // 不能这么写，因为fullname是用const声明的
      // console.log(fullname); // => ComputedRefImpl computed函数返回的是ref
      fullname.value="ding+ jie"
    }

    return {
      fullname,
      setFullname
    }
  }
}
</script>